<template>
  <div class="lowCodeForm">
    <div class="lowCodeForm-editor">
      <div class="form-table-head">
        <div>新建表单</div>
        <div @click="routerGoLast" class="form-table-head-back">返回</div>
      </div>
      <editor
        ref="selfEditorRef"
        v-model="data"
        @closeEditor="routerGoLast"
      ></editor>
      <div class="form-table-foot">
        <el-button @click="routerGoLast">取消</el-button>
        <el-button @click="onSubmit" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="jsx" setup>
import axios from "axios";
import deepcopy from "deepcopy";
axios.defaults.baseURL = "http://182.151.11.69:31011";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
//低代码生成表单
import editor from "@/components/LowCodeForm/editor.jsx";

let { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const routerGoLast = () => {
  router.go(-1);
};
const data = ref({
  container: {
    labelPosition: "top",
    titleForm: "",
    titleSubtile: "",
    formNeed: "",
    btnName: "提交",
  },
  blocks: [],
  model: [],
  propNames: [], //表单字段验重
});
const selfEditorRef = ref(null);
//全部填写
const isCanSubmit = () => {
  let flag = true;
  if (data.value.blocks.length == 0) {
    ElMessage({
      type: "error",
      message: `请填写表单内容`,
    });
    flag = false;
    return flag;
  }

  for (const [index, item] of data.value.blocks.entries()) {
    if (!item.propName) {
      flag = false;
      ElMessage({
        type: "error",
        message: `请将组件${index + 1}填写完整并保存`,
      });
      return flag;
    }
  }

  return flag;
};
const onSubmit = () => {
  selfEditorRef.value
    .submitFormTitle()
    .then((res) => {
      if (isCanSubmit()) {
        let dataValue = deepcopy(data.value);
        console.log(123, dataValue);
        //导出为小程序所需的格式  单独存储一套小程序使用的数据即可
        /* 注意：
        {
        keyName:propName,
        valid:mustFill,
        }         
        */

        let newArr = dataValue.blocks.map((item) => {
          delete item.keyName
          return {
            ...item,
            keyName: item.propName,
            valid: item.mustFill,
          };
        });
        data.value.miniValue = newArr




        console.log("onSubmit", data.value);
        ElMessageBox.confirm("是否提交" + JSON.stringify(data.value), "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let fieldsData = data.value.blocks.map((item, index) => {
            return {
              fieldName: item.propName,
              fieldType: "varchar",
              fieldLength: 100,
              need: item.mustFill ? true : false,
              notes: item.label,
              decimalPoint: 0,
              orderNum: index + 1,
            };
          });
          // axios
          //   .post("/v1/demo/lowCode/designTable", {
          //     tableId: data.value.tableId,
          //     fields: fieldsData,
          //     styleJson: JSON.stringify(data.value),
          //   })
          //   .then((res) => {
          //     ElMessage({
          //       type: "success",
          //       message: "提交成功",
          //     });
          //     ctx.emit("closeEditor", null);
          //   })
          // .catch((err) => {});
        });
      }
    })
    .catch((err) => {
      console.log(999,err);
      ElMessage.error(err);
    });
};

onMounted(() => {});
</script>

<style lang="scss">
.lowCodeForm {
  height: calc(100vh - 150px);
  box-sizing: border-box;
  &-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-color);
  }

  .form-table {
    display: flex;
    height: 100%;
    background-color: var(--bg-color);
    box-sizing: border-box;
    flex-direction: column;
    gap: 1rem;
    &-head {
      display: flex;
      justify-content: space-between;
      background-color: white;
      padding: 1rem;

      &-back {
        cursor: pointer;
        color: var(--primary-main-color);
        &:hover {
          //下划线
          text-decoration: underline;
        }
      }
    }
    &-foot {
      background-color: white;
      text-align: right;
      padding: 0.5rem;
    }
  }
}
</style>
